import React, { Component } from 'react'
import { Calendar, ConfigProvider } from 'antd'
import zh_CN from 'antd/es/locale/zh_CN'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import './index.css'

dayjs.locale('zh-cn');

/**
 * 
 * 日历组件
 * @author liu_jshan
 * @version 1.0 2024-03-17
 * 
 * props:
 * value：初始时间 Date，默认今天
 * markDates：需要标记的时间点 array[string] | function():array[string]
 * onChange: 选择的时间变化的回调 function(value) value为'YYYY-MM-DD'格式的字符串
 */
class CalendarWidget extends Component {

    constructor(props) {
        super(props)
        this.state = {
            dateValue: dayjs(), //展示的时间的值
            checkedDate: dayjs(), //选中的时间值
            markDates: [], //需要标记的时间点
        }
    }

    async componentDidMount() {
        let dateValue = dayjs()
        let checkedDate = dayjs()
        let markDates = []
        if (this.props.value) {
            dateValue = dayjs(this.props.value)
            checkedDate = dayjs(this.props.value)
        }
        if (this.props.markDates) {
            if (typeof this.props.markDates === 'function') {
                markDates = await this.props.markDates()
            } else {
                markDates = this.props.markDates
            }
        }
        
        await new Promise(resolve => {
            this.setState({
                dateValue,
                checkedDate,
                markDates
            }, resolve)
        })
    }

    onSelect = async (date, info) => {
        if (info.source === 'date') {
            await new Promise(resolve => {
                this.setState({
                    dateValue: date,
                    checkedDate: date
                }, resolve)
            })
            if (this.props.onChange && typeof this.props.onChange === 'function') {
                await this.props.onChange(date.format('YYYY-MM-DD'))
            }
        } else {
            await new Promise(resolve => {
                this.setState({
                    dateValue: date
                }, resolve)
            })   
        }
    }

    fullCellRender = (date, info) => {
        if (info.type === 'month') return null
        const { markDates, checkedDate } = this.state
        const checkedDateStr = checkedDate.format('YYYY-MM-DD')
        const dateString = date.format('YYYY-MM-DD')
        const today = dayjs().format('YYYY-MM-DD')
        const day = date.format('DD')
        if (dateString === checkedDateStr) {
            return (
                <span className='CalendarWidget-date-mormal CalendarWidget-date-checked'>
                    {day}
                </span>
            )
        } else if (dateString === today) {
            return (
                <span className='CalendarWidget-date-mormal CalendarWidget-date-today'>
                    {day}
                </span>
            )
        } else if (markDates.includes(dateString)) {
            return (
                <span className='CalendarWidget-date-mormal CalendarWidget-date-mark'>
                    {day}
                </span>
            )
        } else {
            return (
                <span className='CalendarWidget-date-mormal'>
                    {day}
                </span>
            )
        }
    }

    render() {
        return (
            <ConfigProvider locale={zh_CN}>
                <Calendar
                    fullscreen={false}
                    value={this.state.dateValue}
                    onSelect={this.onSelect}
                    fullCellRender={this.fullCellRender}
                />
            </ConfigProvider>
        )
    }
}

export default CalendarWidget